<template>
    <el-dialog v-model="drawer" title="上传回执凭据" width="700px" :append-to-body="true" @close="close" destroy-on-close center>
        <el-card class="box-card">
            <div class="upload-box">
                <el-upload v-model:file-list="files" ref="uploadBanner" :action="uploadUrl" :headers="headers"
                    list-type="picture-card" :auto-upload="true" :multiple="true" accept="image/*">
                    <el-icon>
                        <ele-Camera />
                    </el-icon>
                    <template #file="{ file }">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="图片" />
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <el-icon>
                                    <ele-ZoomIn />
                                </el-icon>
                            </span>
                            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <el-icon>
                                    <ele-Delete />
                                </el-icon>
                            </span>
                        </span>
                    </template>
                </el-upload>
                <p class="alert-tips">建议尺寸:750px*750px, 可拖拽改变图片顺序</p>
            </div>
        </el-card>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="submitReceipt">上传</el-button>
                <el-button @click="close">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script>
import { computed, reactive, toRefs, watch, ref } from 'vue'
import { ElMessage, ElMessageBox, ElCarouselItem } from 'element-plus'
import { useOrderApi } from '/@/api/order/index'
import CreateOrder from './CreateOrder.vue'

import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo'
import { Session } from '/@/utils/storage'

import api from '/@/api/commonApi'

export default {
    name: 'DraftList',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        detailData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    components: {
        CreateOrder,
        ElCarouselItem
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const uploadBanner = ref()
        const { dialogDrawer, detailData } = toRefs(props)
        // 用户信息
        const storeUserInfo = useUserInfo() // 订单各类状态数据
        const { userInfos } = storeToRefs(storeUserInfo)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const form = computed({
            get: () => detailData.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const orderApi = useOrderApi()
        const state = reactive({
            uploadUrl: '/api/file/filaAttach/upload',
            headers: {
                '17work': Session.get('token')
            },
            files: [], // 凭证
        })
        watch(() => dialogDrawer.value,
            val => {
                if (val) {

                }
            }
        )
        const close = () => {
            context.emit('onSubmit', true)
            context.emit('update:dialogDrawer', false)
        }
        const handlePictureCardPreview = (file) => {
            state.dialogImageUrl = file.url
            state.dialogBannerVisible = true
        }
        const handleRemove = file => {
            uploadBanner.value.handleRemove(file)
        }
        const submitReceipt = () => {
            let params = []
            state.files.forEach(item => {
                params.push({
                    orderId: form.value.id,
                    receiptUrl: item.response.data.src
                })
            })
            api.uploadReceipts({
                receiptList: params
            }).then(res => {
                ElMessage.success("上传成功")
                close()
            })
        }

        return {
            ...toRefs(state),
            drawer,
            close,
            form,
            uploadBanner,
            handleRemove,
            submitReceipt,
            handlePictureCardPreview,
        }
    }
}
</script>
  
<style>
.el-dialog__body {}

.el-carousel__container {
    height: 600px !important;
}

.alert-tips {
    margin-top: 10px;
    font-size: 12px;
    color: var(--el-color-info);
}
</style>